<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
<!--    // 第三步：引用组件-->
<!--    <组件名></组件名>-->
<!--    自定义的组件还是可以用vue的指令-->
    <Person name="张三" age="22"></Person>
    <Person name="李四" age="25"></Person>
</div>
<!--引入一个vue.js文件-->
<script src="js/vue.2.7.14.js"></script>

<script>
    // 第一步：定义一个组件
    // 注意：定义组件的时候，一定不能添加el，因为组件是复用的，不能指定某个元素
    let Person = Vue.extend({

        template:`<div>
                <h1>人员的姓名是：{{name}}</h1>
                <h1>人员的年龄是：{{age}}</h1>
                <h1><button @click="show">点击中大奖</button></h1>
                </div>`,
        methods: {
            show() {
                alert("恭喜你中了500万大奖")
            }
        },
        props:{
            name:{type:String,required:true},
            age:{type:Number,required:true}
        }
    })
    Vue.component('Person' ,Person)
    // 第二步：局部注册组件 -》 全局注册
    // 把组件注册到vm对象里面
    // 组件的K建议大写字母开头
    new Vue({
        el:'#box',
        // 不简写 components:{Person:Person}
        // 因为有全局注册了，所以可以省略 components:{Person}
    });





</script>


</body>
</html>